<template>
  <div class="unlogin-stats">
    <div class="stat-card">
      <h3>园区公开信息</h3>
      <div class="stat-item">
        <span>园区总面积：</span>
        <span class="value">{{ totalArea }} ㎡</span>
      </div>
      <div class="stat-item">
        <span>公开企业：</span>
        <span class="value">{{ publicEnterpriseCount }} 家</span>
      </div>
      <div class="stat-item">
        <span>开放区域：</span>
        <span class="value">{{ publicAreaCount }} 处</span>
      </div>
      <div class="stat-item">
        <span>今日开放时间：</span>
        <span class="value">{{ openHours }}</span>
      </div>
      <el-button 
        type="primary" 
        size="small" 
        style="width: 100%; margin-top: 15px;"
        @click="toLogin"
      >
        登录查看完整数据
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';

// 公开统计数据
const totalArea = ref('12,500');
const publicEnterpriseCount = ref(23);
const publicAreaCount = ref(8);
const openHours = ref('09:00 - 18:00');

const router = useRouter();

// 跳转登录（实际项目中替换为登录页路由）
const toLogin = () => {
  ElMessage.info('即将跳转至登录页');
  // router.push('/login');
};
</script>

<style scoped>
.unlogin-stats {
  position: absolute;
  top: 70px;
  left: 20px;
  z-index: 10;
  /* 核心：禁用指针事件，事件穿透到下方 */
  pointer-events: none;
}

.stat-card {
  width: 280px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  /* 核心：恢复指针事件，使其可点击（不穿透） */
  pointer-events: auto;
}

.stat-card h3 {
  margin: 0 0 15px;
  font-size: 16px;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  font-size: 14px;
}

.stat-item .value {
  font-weight: bold;
  color: #6b7280;
}
</style>